<template>
  <div>
    <div>
      <img :src="imgPath" :style="imgcss">
    </div>
    用户名：<input type="text" v-model="userObj.userName"/><br>
    密码---：<input type="password" v-model="userObj.pwd"/><br>
    <input type="button" value="登陆" @click="land()">
    <input type="button" value="确定" @click="ok">
    <input type="button" value="改变样式" @click="changeStyle">
    <hr/>
    单价：{{ price }}<br>
    数量:<input type="text" v-model="num"><br>
    总价：{{ price * num }}
    <hr>
    {{ age >= 18 ? "成年" : "小孩" }}
    <hr>
    单选框：<br>
    性别：<input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女<br>
    {{ sex }}
    <hr>
    下拉框：<br>
    <select v-model="edu">
      <option value="gz">高中</option>
      <option value="dz">大专</option>
      <option value="bk">本科</option>
    </select>
    {{ edu }}
    <input type="button" @click="changeItem" value="改变选项">
    <hr>
    复选框：<br>
    <input type="checkbox" value="体育" v-model="likeArray">体育
    <input type="checkbox" value="音乐" v-model="likeArray">音乐
    <input type="checkbox" value="美术" v-model="likeArray">美术
    <input type="checkbox" value="上网" v-model="likeArray">上网
    <input type="checkbox" value="游戏" v-model="likeArray">游戏<br>
    {{ likeArray }}<br>
    <hr/>
    工资：<input type="text" ref="money"><br>
    <input type="button" value="获取值" @click="showValue"><br>
    <hr/>
    成绩：{{ grade }}<br>
    是否合格：<span v-if="grade >= 60">合格</span>
    <span v-else>不合格</span><br>
    等级：
    <span v-if="grade >= 90 ">优秀</span>
    <span v-else-if="grade >= 80 ">良好</span>
    <span v-else-if="grade >= 60 ">中等</span>
    <span v-else>差</span>

    <table border="1" cellspacing="0" width="80%">
      <thead>
      <tr>
        <th>序号</th>
        <th>编号</th>
        <th>姓名</th>
        <th>工资</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="(em,index) in emList" :key="em.id">
        <td>{{ index }}</td>
        <td>{{ em.id }}</td>
        <td>{{ em.name }}</td>
        <td>{{ em.money }}</td>
        <td>{{ em.status }}</td>
        <td><input type="button" v-if="em.status == '在职'" value="离职"/></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userObj: {},
      imgcss: {width: '200px', height: '200px', border: "3px solid red"},
      imgPath: require('./img/14.jpg'),
      price: 30,
      num: 1,
      age: 10,
      sex: "男",
      edu: "",
      likeArray: [],
      grade: 80,
      emList: [
        {id: 1, name: "张三", money: 8000, status: "在职"},
        {id: 3, name: "刘勇", money: 9000, status: "在职"},
        {id: 4, name: "何红", money: 12000, status: "离职"},
        {id: 6, name: "周大", money: 10000, status: "在职"}
      ]
    }
  },
  methods: {
    land() {
      if (this.userObj.userName == "java" && this.userObj.pwd == "123") {
        //经路由跳转首页
        //  this.$router.push("/index");
        //经路由跳转首页，并传递参数
        //name表示注册的路由名称 ，params描述传递参数
        this.$router.push({name: "Index", params: {id: 2, name: "tom"}});
      } else {
        alert("登陆失败");
      }
    },
    ok() {
      alert("确定");
    },
    changeStyle() {
      this.imgcss.width = "100px";
      this.imgcss.height = "100px";
    },
    changeItem() {
      this.edu = "bk";
    },
    showValue() {
      alert(this.$refs.money.value);
      this.$refs.money.style.color = "red";
    }
  }
}
</script>

<style scoped>

</style>